<template>
  <div class="w-full mt-10">
    <div class="flex items-center gap-4 mb-4">
      <span>当前日期：{{ currYearMonthDayStr }}</span>
      <a-date-picker placeholder="选择日期查询" v-model:value="currYearMonthDay" @change="handleChange" />
    </div>
    <a-table :dataSource="deliveryList" :columns="columns" :pagination="false" bordered />
  </div>
</template>

<script lang='ts' setup>
import type { DeliveryInfo, OriginalDeliveryInfo } from '@/interface/good'
import type { Moment } from 'moment'
import moment from 'moment'
import { ref, computed } from 'vue'
import { deliveryInfo } from '@/api/good'
import { formatCurrTime } from '@/utils/fomatTime'

type AntColumn = {
  dataIndex: string | number
  key?: string | number
  slots?: { title: string, customRender: string }
  title?: string
}

const formatTime = formatCurrTime()
const currYearMonthDay = ref<Moment>(moment(formatTime, 'YYYY-MM-DD'))


const currYearMonthDayStr = computed(() => currYearMonthDay.value ? moment(currYearMonthDay.value).format('YYYY-MM-DD') : '请选择年月')
const currTime = computed(() => {
  return {
    year: moment(currYearMonthDay.value).format('YYYY'),
    month: moment(currYearMonthDay.value).format('M'),
    day: moment(currYearMonthDay.value).format('D'),
  }
})

const columns: AntColumn[] = [
  {
    dataIndex: 'good_name',
    title: '商品'
  },
  {
    dataIndex: 'good_price',
    title: '商品单价'
  },
  {
    dataIndex: 'good_num',
    title: '数量'
  },
  {
    dataIndex: 'agency_addr',
    title: '代销处地址'
  },
  {
    dataIndex: 'agency_manager',
    title: '代销处经理'
  },
  {
    dataIndex: 'agency_phone',
    title: '代销处联系方式'
  },
]
const deliveryList = ref<DeliveryInfo[]>([])
const key = ref(0)
const getCurrDeliveryList = async (date: { year: string, month: string, day: string }) => {
  const { data: { data } }: { data: { data: OriginalDeliveryInfo[] } } = await deliveryInfo(date)
  deliveryList.value = data.map(item => {
    key.value++
    return {
      key,
      agency_phone: item.o_phone,
      agency_addr: item.o_address,
      good_price: item.c_price,
      agency_manager: item.o_manager,
      good_name: item.c_name,
      good_num: item.g_c_num
    }

  })
}
const handleChange = () => {
  if (!currYearMonthDay.value) return
  getCurrDeliveryList(currTime.value)
}
getCurrDeliveryList(currTime.value)

</script>
<style scoped>
</style>